<template>
  <div class="orderDetails">
    <van-nav-bar
        :title="$t('order_details')"
        left-arrow
        @click-left="$router.go(-1)"
    />
    <div class="time_line">
      <div class="line_item" v-for="(item,index) in statusList" :key="item.approvalResult">
        <div class="line" v-show="index + 1 !== statusList.length"></div>
        <div class="round" :style="{backgroundColor:[-1,-2,7].indexOf(item.approvalResult) === -1 ? '#2CB222' : '#DE0034'}">{{ statusList.length - index }}</div>
        <div class="content">
          <div class="title">{{ item.approvalResultStr }}</div>
          <!--          利息费用-->
          <div class="center" v-show="item.shouldInterest">
            <span>{{ $t('rateFee_detail') }}</span> : <span class="symbol">{{ $t('symbol') }}</span><span>{{ formatterMoney(item.shouldInterest) }}</span>
          </div>
          <!--          通过金额-->
          <div class="center" v-show="item.passAmount">
            <span>{{ $t('order_approved_amoun') }}</span> : <span class="symbol">{{ $t('symbol') }}</span><span>{{formatterMoney(item.passAmount)  }}</span>
          </div>
          <!--          逾期天数-->
          <div class="center" v-show="item.overdueDay">
            <span>{{ $t('order_overdue_day') }}</span> :<span>{{ item.overdueDay }}</span>
          </div>
          <!--          逾期罚息-->
          <div class="center" v-show="item.totalOverdueFine">
            <span>{{ $t('order_overdue_interest') }}</span> : <span class="symbol">{{ $t('symbol') }}</span><span>{{ formatterMoney(item.totalOverdueFine) }}</span>
          </div>
          <!--          待还总金额-->
          <div class="center" v-show="item.notTotal">
            <span>{{ $t('order_notTotal') }}</span> : <span class="symbol">{{ $t('symbol') }}</span><span>{{formatterMoney(item.notTotal) }}</span>
          </div>
          <!--          最后还款日-->
          <div class="center" v-show="item.lastRepaymentDay">
            <span>{{ $t('order_last_pay_time') }}</span> :<span>{{ item.lastRepaymentDay }}</span>
          </div>
          <div class="date">{{ item.date }}</div>
        </div>
      </div>
    </div>
    <div class="wrapper_button">
      <button class="button" @click="goRepayment" v-show="isRepayment">{{ $t('repayment') }}</button>
      <button class="button" @click="goDelay" v-show="isRollOver">{{ $t('delay') }}</button>
    </div>
  </div>
</template>

<script>
import {ref} from 'vue'
import {lookOrderDetails} from '@/api/order'
import router from '@/router/index'
import {useStore} from "vuex";
import {formatMoney} from "@/utils/tool";

export default {
  setup() {
    const statusList = ref([])
    const store = useStore()
    const isRollOver = ref(false)
    const isRepayment = ref(false)
    const {loanRecordId} = router.currentRoute.value.query
    const fetchOrderDetails = async () => {
      const res = await lookOrderDetails({loanRecordId})
      statusList.value = res.data
      // 是否可展期
      isRollOver.value = statusList.value.filter(i => i.isRollOver === 1).length ? true : false
      // 判断订单状态是否可支付
      isRepayment.value = [5, 7].indexOf(statusList.value[0].approvalResult) !== -1
      // 清除loading
      store.dispatch('changeLoading', false)
    }
    const goRepayment = () => {
      router.push({
        path: '/repayment',
        query: {
          loanRecordId: loanRecordId
        }
      })
    }
    const goDelay = () => {
      router.push({
        path: '/extend',
        query: {
          loanRecordId: loanRecordId
        }
      })
    }
    // 格式化金额
    const formatterMoney = (value) => {
      if (value) {
        return formatMoney(value, 0, "", '.')
      } else {
        return value
      }
    }
    fetchOrderDetails()
    return {
      statusList,
      goRepayment,
      goDelay,
      isRollOver,
      isRepayment,
      formatterMoney
    }
  }
}
</script>

<style scoped lang="less">
.orderDetails {
  background-color: #f2f3f5;
  position: relative;
  overflow: auto;

  ::v-deep .van-nav-bar {
    background: linear-gradient(90deg, #FF5252, #FF8244) !important;
    z-index: 1999;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #333333 !important;
  }

  ::v-deep .van-switch {
    height: 26px !important;

    .van-switch__node {
      height: 26px !important;
    }
  }

  .time_line {
    padding: 20px;
    max-height: 500px;
    overflow-y: auto;
    box-sizing: border-box;
    .line_item {
      position: relative;
      padding-bottom: 15px;

      .line {
        position: absolute;
        left: 16px;
        top: 6px;
        height: 110%;
        border-left: 1px solid #BBBCBC;
      }

      .round {
        position: absolute;
        height: 32px;
        width: 32px;
        top: 6px;
        border-radius: 50%;
        text-align: center;
        line-height: 32px;
        color: #FFFFFF;
        font-size: 18px;
        background-color: #2CB222;
      }

      .content {
        margin-left: 45px;
        box-sizing: border-box;
        padding-top: 10px;

        .title {
          font-size: 13px;
          font-weight: 600;
          padding-bottom: 5px;
        }

        .center {
          color: #505050;
          padding-bottom: 5px;
          font-size: 10px;
        }

        .date {
          font-size: 10px;
          color: #929292;
        }
      }
    }
  }

  .wrapper_button {
    position: fixed;
    bottom: 20px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: space-around;

    .button {
      width: 130px;
      padding: 5px 0;
      color: #ffffff;
      border: none;
      font-size: 16px;
      border-radius: 14px;
      margin-bottom: 10px;
      background: linear-gradient(-45deg, #FF5252, #FF8C3C);
      box-shadow: 0px 4px 10px 0px
    }
  }
}
</style>
